<template>
  <transition :name="fadeName">
    <!-- <div class="zx-dialog-mask nobg" v-show="showBool" :class="checkClass()">
            <div class="zx-dialog-cont zx-toast">
                <div class="zx-toast-msg" v-html='msg'></div>
            </div>
        </div> -->
    <div class="zx-toast" v-show="showBool" :class="checkClass()">
      <div class="zx-toast-msg" v-html='msg'></div>
    </div>
  </transition>
</template>
<script>
export default {
  props: {
    msg: String,
    time: {
      type: Number,
      default: 1000
    },
    position: {
      type: String,
      default: 'center'
    }
  },
  data() {
    return {
    };
  },
  computed: {
    showBool() {
      return this.msg ? true : false;
    },
    fadeName() {
      return 'fade-' + this.position;
    }
  },
  methods: {
    checkClass() {
      return 'zx-toast-' + this.position;
    }
  }
};
</script>
<style scoped>
  .fade-bottom-enter-active,
  .fade-bottom-leave-active,
  .fade-center-enter-active,
  .fade-center-leave-active,
  .fade-top-enter-active,
  .fade-top-leave-active {
    transition: all ease .5s;
  }

  .fade-bottom-enter,
  .fade-bottom-leave-to {
    transform: translateY(50px);
    opacity: 0;
  }

  .fade-top-enter,
  .fade-top-leave-to {
    transform: translateY(-50px);
    opacity: 0;
  }

  .fade-center-enter {
    transform: translateX(-300px);
    opacity: 0;
  }

  .fade-center-leave-to {
    transform: translateX(300px);
    opacity: 0;
  }
</style>